<template>
  <!-- 新闻页的切换面板 -->
  <div class="Mytab">
    <ul class="tabTitle">
      <li :class="!addactive ? isactive : ''" data-tab="1" @click="change">
        综合新闻
      </li>
      <li :class="addactive ? isactive : ''" @click="change" data-tab="2">
        博物馆新闻
      </li>
    </ul>
    <div :style="!addactive ? changezIndex : ''" class="tabPane">
      <div class="newsItem" v-for="(value, item) in news" :key="item">
        <MyTime :time="value.publishTime.slice(0, 10)" class="timeStyle" />
        <!-- <p>{{value.con1}}</p> -->
        <p
          @click="
            () => {
              jumpDetail(value.aid);
            }
          "
        >
          {{ value.introduce }}
        </p>
      </div>
    </div>
    <div :style="addactive ? changezIndex : ''" class="tabPane">
      <div class="newsItem" v-for="(value, item) in news1" :key="item">
        <MyTime :time="value.publishTime.slice(0, 10)" />
        <p
          @click="
            () => {
              jumpDetail(value.aid);
            }
          "
        >
          {{ value.introduce }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import MyTime from "./TimeStyle";
import { getNews } from "../../api/cl/getNews.tsx";
export default {
  name: "NewsTab",

  created() {
    getNews().then((res) => {
      this.news = res.data.data.slice(3, 7);
      this.news1 = res.data.data.slice(5, 9);
      console.log(this.news);
    });
  },
  data() {
    return {
      news1: [],
      news: [],
      changezIndex: {
        zIndex: 1,
      },
      addactive: true,
      isactive: {
        active: true,
      },
    };
  },
  methods: {
    jumpDetail(aid) {
      console.log(aid);
      this.$router.push(`/pc/scienceAticle?article_id=${aid}`);
    },
    change(e) {
      if (e.target.dataset.tab == 1) {
        this.addactive = true;
      } else {
        this.addactive = false;
      }
    },
  },
  components: {
    MyTime,
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.Mytab {
  /* width: 350px; */
  position: relative;
}
.tabTitle {
  width: 350px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #fff;
  z-index: 5;
}
.tabTitle li {
  list-style: none;
  float: left;
  width: 50%;
  height: 100%;
  cursor: pointer;
}
.tabPane {
  width: 350px;
  height: 400px;
  position: absolute;
  background-color: #fff;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.newsItem {
  height: 85px;
  border-bottom: 1px solid #aaa;
  width: 250px;
  margin: auto;
}

p {
  margin: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 250px;
  cursor: pointer;
  overflow: hidden;
  margin-top: 5px;
}
p:hover {
  color: cornflowerblue;
}
.active {
  background-color: cornflowerblue;
  color: #fff;
}
</style>
